<template>
  <div class="loading-container">
    <div class="loading-content">
      <div class="loading-animation">
        <div class="dot dot1"></div>
        <div class="dot dot2"></div>
        <div class="dot dot3"></div>
      </div>
      <div class="loading-text">加载中...</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MiddlePage",
  data() {
    return {
      loading: true,
    };
  },
  created() {
    const token = localStorage.getItem("infomng-access_token");
    console.log(token);
    if (!JSON.parse(token).content) {

      const { info } = window.$wujie.props;

      const { username, password } = info;

      let loginForm = {
        username,
        password,
        randomStr: "blockPuzzle",
      };

      this.$store
        .dispatch("LoginByUsername", Object.assign({}, loginForm))
        .then(() => {
          this.goPage();
        });

        
    } else {
      this.goPage();
    }
  },
  mounted() {
    window.$wujie.bus.$on("update-props", (newProps) => {
      console.log("收到新props", newProps);

      const { url } = newProps.info;

      console.log("切换路径", url);

      this.$router.push({
        path: url,
      });
    });
  },

  methods: {
    goPage() {
      if (window.$wujie) {
        const { info } = window.$wujie.props;
        const { url } = info;

        console.log("访问子应用路由地址host1", url);
        this.$router.push({
          path: "/",
        });
        setTimeout(() => {
          this.$router.push({
            path: url,
          });
        }, 500);
      }
    },
  },
};
</script>

<style scoped>
.loading-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
}

.loading-content {
  text-align: center;
}

.loading-animation {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.dot {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #409eff;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot1 {
  animation-delay: -0.32s;
}
.dot2 {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
}

.loading-text {
  color: #606266;
  font-size: 16px;
}
</style>
